<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E币银行 v2.2.0 - 安全便捷的数字资产管理平台</title>
    <meta name="description" content="E币银行是一个安全、便捷、高效的数字资产管理平台，提供E币交易、充值、账单管理和Minecraft游戏专区等功能。">
    <meta name="keywords" content="E币银行,数字资产,虚拟货币,在线交易,Minecraft,游戏充值,数字商品">
    <meta name="author" content="E币银行团队">
    
    <!-- 社交分享优化 -->
    <meta property="og:title" content="E币银行 v2.2.0 - 安全便捷的数字资产管理平台">
    <meta property="og:description" content="E币银行是一个安全、便捷、高效的数字资产管理平台，提供E币交易、充值、账单管理和Minecraft游戏专区等功能。">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ebank.example.com">
    <meta property="og:image" content="https://ebank.example.com/images/og-image.jpg">
    
    <!-- Twitter卡片优化 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="E币银行 v2.2.0 - 安全便捷的数字资产管理平台">
    <meta name="twitter:description" content="E币银行是一个安全、便捷、高效的数字资产管理平台，提供E币交易、充值、账单管理和Minecraft游戏专区等功能。">
    <meta name="twitter:image" content="https://ebank.example.com/images/twitter-image.jpg">
    
    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FinancialService",
      "name": "E币银行",
      "description": "安全、便捷、高效的数字资产管理平台",
      "url": "https://ebank.example.com",
      "logo": "https://ebank.example.com/images/logo.png",
      "sameAs": [
        "https://twitter.com/ebank",
        "https://facebook.com/ebank"
      ],
      "serviceArea": {
        "@type": "Country",
        "name": "中国"
      },
      "offers": {
        "@type": "Offer",
        "description": "数字资产管理服务"
      }
    }
    </script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #FFAF00;
            --primary-dark: #e69e00;
            --primary-light: #ffd166;
            --secondary-color: #1a1a2e;
            --light-bg: #f8f9fa;
            --dark-bg: #0d1b2a;
            --text-color: #333;
            --white: #ffffff;
            --gray: #6c757d;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --card-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
            --minecraft-green: #00a800;
            --minecraft-dark-green: #008000;
            --admin-color: #8e44ad;
            --admin-dark: #7d3c98;
            --success-color: #27ae60;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--light-bg);
            color: var(--text-color);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 登录/注册页面样式 */
        #login-page, #register-page, #admin-login-page {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--dark-bg) 100%);
            position: relative;
            overflow: hidden;
        }
        
        .login-container, .register-container, .admin-login-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            padding: 40px;
            width: 100%;
            max-width: 450px;
            z-index: 10;
            box-shadow: var(--shadow);
            animation: fadeIn 0.8s ease;
        }
        
        .logo {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .logo h1 {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 10px;
            font-weight: 800;
        }
        
        .logo span {
            color: var(--primary-color);
        }
        
        .admin-logo span {
            color: var(--admin-color);
        }
        
        .logo p {
            color: var(--gray);
            font-size: 1.1rem;
        }
        
        .login-form .form-group, .register-form .form-group, .admin-login-form .form-group {
            margin-bottom: 20px;
        }
        
        .login-form label, .register-form label, .admin-login-form label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }
        
        .login-form input, .register-form input, .admin-login-form input {
            width: 100%;
            padding: 14px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: var(--transition);
        }
        
        .login-form input:focus, .register-form input:focus, .admin-login-form input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 175, 0, 0.2);
        }
        
        .admin-login-form input:focus {
            border-color: var(--admin-color);
            box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.2);
        }
        
        .login-btn, .register-btn, .admin-login-btn {
            width: 100%;
            padding: 14px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 10px;
        }
        
        .admin-login-btn {
            background: var(--admin-color);
        }
        
        .login-btn:hover, .register-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
        }
        
        .admin-login-btn:hover {
            background: var(--admin-dark);
            transform: translateY(-3px);
        }
        
        .footer-text {
            text-align: center;
            margin-top: 20px;
            color: var(--gray);
        }
        
        .switch-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
        }
        
        .admin-switch-link {
            color: var(--admin-color);
        }
        
        .switch-link:hover {
            text-decoration: underline;
        }
        
        /* 主页面样式 */
        #main-page, #trade-page, #bill-page, #help-page, #minecraft-page, #admin-page, #version-page {
            display: none;
            min-height: 100vh;
            background: linear-gradient(to bottom, #f0f2f5 0%, #e4e7eb 100%);
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: var(--white);
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .admin-header {
            background: linear-gradient(135deg, var(--admin-color) 0%, var(--admin-dark) 100%);
            color: white;
        }
        
        .nav-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
            font-weight: 600;
        }
        
        .admin-nav-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }
        
        .nav-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }
        
        .admin-nav-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .header-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-icon {
            background: var(--primary-light);
            color: var(--secondary-color);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            font-size: 18px;
        }
        
        .admin-action-icon {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }
        
        .action-icon:hover {
            background: var(--primary-color);
            color: white;
            transform: scale(1.1);
        }
        
        .admin-action-icon:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .balance-card {
            max-width: 500px;
            margin: 40px auto;
            background: var(--white);
            border-radius: 16px;
            padding: 30px;
            text-align: center;
            box-shadow: var(--card-shadow);
            animation: slideUp 0.5s ease;
            border: 2px solid var(--primary-light);
        }
        
        .balance-card h2 {
            color: var(--secondary-color);
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .balance-amount {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--primary-color);
            margin: 20px 0;
        }
        
        .balance-symbol {
            font-size: 2rem;
            vertical-align: top;
            margin-right: 5px;
        }
        
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .action-btn {
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            min-width: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .primary-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            box-shadow: 0 4px 8px rgba(255, 175, 0, 0.3);
        }
        
        .secondary-btn {
            background: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
        }
        
        .minecraft-btn {
            background: var(--minecraft-green);
            color: white;
            border: none;
        }
        
        .admin-btn {
            background: var(--admin-color);
            color: white;
            border: none;
        }
        
        .version-btn {
            background: #3498db;
            color: white;
            border: none;
        }
        
        .primary-btn:hover, .secondary-btn:hover, .minecraft-btn:hover, .admin-btn:hover, .version-btn:hover {
            transform: translateY(-3px);
        }
        
        /* 交易页面样式 */
        .page-title {
            text-align: center;
            margin: 20px 0 30px;
            color: var(--secondary-color);
            font-size: 2rem;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .product-card {
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
        }
        
        .product-card:hover {
            transform: translateY(-10px);
        }
        
        .product-img {
            height: 200px;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        
        .product-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--primary-color);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-title {
            font-size: 1.4rem;
            margin-bottom: 10px;
            color: var(--secondary-color);
        }
        
        .product-price {
            font-size: 1.5rem;
            color: var(--primary-color);
            font-weight: 800;
            margin-bottom: 15px;
        }
        
        .format-select {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 8px;
            margin-bottom: 15px;
            font-size: 16px;
        }
        
        .format-select:focus {
            border-color: var(--primary-color);
            outline: none;
        }
        
        .buy-btn {
            width: 100%;
            padding: 12px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .buy-btn:hover {
            background: var(--primary-dark);
        }
        
        /* 账单页面样式 */
        .bill-container {
            max-width: 800px;
            margin: 40px auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: var(--card-shadow);
        }
        
        .bill-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--secondary-color);
            font-size: 2rem;
        }
        
        .recent-transaction {
            text-align: center;
            padding: 20px;
            background: var(--primary-light);
            border-radius: 12px;
            margin-bottom: 30px;
            font-size: 1.1rem;
            color: var(--secondary-color);
        }
        
        .transaction-list {
            margin-top: 20px;
        }
        
        .transaction-item {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid #eee;
            transition: var(--transition);
        }
        
        .transaction-item:hover {
            background: #f9f9f9;
        }
        
        .transaction-date {
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .transaction-type {
            font-weight: 600;
        }
        
        .transaction-amount {
            font-weight: 700;
        }
        
        .transaction-amount.positive {
            color: var(--minecraft-green);
        }
        
        .transaction-amount.negative {
            color: #e74c3c;
        }
        
        .transaction-balance {
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .no-transactions {
            text-align: center;
            padding: 60px 20px;
            color: var(--gray);
        }
        
        .no-transactions i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: var(--primary-light);
        }
        
        /* 帮助页面样式 */
        .help-container {
            max-width: 800px;
            margin: 40px auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: var(--card-shadow);
        }
        
        .help-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--secondary-color);
            font-size: 2rem;
        }
        
        .help-content {
            line-height: 1.8;
            color: #555;
        }
        
        .help-content h3 {
            color: var(--primary-color);
            margin: 20px 0 10px;
        }
        
        .help-content p {
            margin-bottom: 15px;
        }
        
        .help-content ul {
            margin-left: 20px;
            margin-bottom: 20px;
        }
        
        .help-content li {
            margin-bottom: 8px;
        }
        
        /* Minecraft页面样式 */
        .minecraft-container {
            max-width: 900px;
            margin: 40px auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: var(--card-shadow);
            text-align: center;
        }
        
        .minecraft-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--secondary-color);
            font-size: 2.5rem;
        }
        
        .minecraft-content {
            line-height: 1.8;
            color: #555;
            font-size: 1.3rem;
            margin: 40px 0;
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
            border-radius: 12px;
            border-left: 5px solid var(--minecraft-green);
        }
        
        .minecraft-highlight {
            color: var(--minecraft-green);
            font-weight: 700;
            font-size: 1.4rem;
        }
        
        .minecraft-icon {
            font-size: 5rem;
            color: var(--minecraft-green);
            margin: 30px 0;
        }
        
        .minecraft-feature {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 12px;
            text-align: left;
        }
        
        .minecraft-feature i {
            font-size: 3rem;
            color: var(--minecraft-green);
            flex-shrink: 0;
        }
        
        .minecraft-feature div {
            flex-grow: 1;
        }
        
        .minecraft-feature h3 {
            color: var(--minecraft-dark-green);
            margin-bottom: 10px;
        }
        
        .minecraft-page-btn {
            background: var(--minecraft-green);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            margin: 30px 0;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        
        .minecraft-page-btn:hover {
            background: var(--minecraft-dark-green);
            transform: translateY(-3px);
        }
        
        .download-info {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid var(--minecraft-green);
        }
        
        .download-info h4 {
            color: var(--minecraft-dark-green);
            margin-bottom: 10px;
        }
        
        /* 版本历史页面样式 */
        .version-container {
            max-width: 900px;
            margin: 40px auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: var(--card-shadow);
        }
        
        .version-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--secondary-color);
            font-size: 2.5rem;
        }
        
        .current-version {
            text-align: center;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 30px;
        }
        
        .version-card {
            border-left: 5px solid var(--primary-color);
            padding: 20px;
            margin-bottom: 25px;
            background: #f8f9fa;
            border-radius: 0 8px 8px 0;
            transition: var(--transition);
        }
        
        .version-card:hover {
            transform: translateX(5px);
        }
        
        .version-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .version-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }
        
        .version-date {
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .version-features {
            margin-left: 20px;
        }
        
        .version-features li {
            margin-bottom: 8px;
            position: relative;
        }
        
        .version-features li:before {
            content: "•";
            color: var(--primary-color);
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }
        
        .milestone {
            border-left-color: var(--minecraft-green);
        }
        
        .milestone .version-number {
            color: var(--minecraft-green);
        }
        
        .admin-version {
            border-left-color: var(--admin-color);
        }
        
        .admin-version .version-number {
            color: var(--admin-color);
        }
        
        /* 红色版本样式 */
        .warning-version {
            border-left-color: var(--danger-color);
        }
        
        .warning-version .version-number {
            color: var(--danger-color);
        }
        
        .warning-version .version-features li:before {
            color: var(--danger-color);
        }
        
        /* 管理员页面样式 */
        .admin-container {
            max-width: 1200px;
            margin: 40px auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: var(--card-shadow);
        }
        
        .admin-title {
            text-align: center;
            margin-bottom: 30px;
            color: var(--admin-color);
            font-size: 2.5rem;
        }
        
        .admin-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: var(--card-shadow);
            text-align: center;
            border-top: 4px solid var(--admin-color);
        }
        
        .stat-card h3 {
            color: var(--admin-color);
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .stat-value {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--secondary-color);
        }
        
        .admin-controls {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
        }
        
        .admin-controls h3 {
            color: var(--admin-color);
            margin-bottom: 20px;
        }
        
        .control-group {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            align-items: center;
        }
        
        .control-input {
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 8px;
            flex-grow: 1;
        }
        
        .control-btn {
            padding: 10px 20px;
            background: var(--admin-color);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .control-btn:hover {
            background: var(--admin-dark);
        }
        
        .danger-btn {
            background: var(--danger-color);
        }
        
        .danger-btn:hover {
            background: #c0392b;
        }
        
        .success-btn {
            background: var(--success-color);
        }
        
        .success-btn:hover {
            background: #219653;
        }
        
        .warning-btn {
            background: var(--warning-color);
        }
        
        .warning-btn:hover {
            background: #e67e22;
        }
        
        .users-list {
            margin-top: 30px;
        }
        
        .users-list h3 {
            color: var(--admin-color);
            margin-bottom: 20px;
        }
        
        .user-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }
        
        .user-table th, .user-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .user-table th {
            background: var(--admin-color);
            color: white;
            font-weight: 600;
        }
        
        .user-table tr:hover {
            background: #f5f5f5;
        }
        
        .user-actions {
            display: flex;
            gap: 10px;
        }
        
        .user-action-btn {
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: var(--transition);
        }
        
        .view-btn {
            background: var(--primary-color);
            color: white;
        }
        
        .delete-btn {
            background: var(--danger-color);
            color: white;
        }
        
        .add-btn {
            background: var(--success-color);
            color: white;
        }
        
        .deduct-btn {
            background: var(--warning-color);
            color: white;
        }
        
        .password-btn {
            background: #3498db;
            color: white;
        }
        
        .user-action-btn:hover {
            opacity: 0.9;
        }
        
        /* 商品管理样式 */
        .products-management {
            margin-top: 40px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
        }
        
        .products-management h3 {
            color: var(--admin-color);
            margin-bottom: 20px;
        }
        
        .product-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
        }
        
        .form-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .form-group {
            flex: 1;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #555;
        }
        
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .form-group textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .product-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }
        
        .product-table th, .product-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .product-table th {
            background: var(--admin-color);
            color: white;
            font-weight: 600;
        }
        
        .product-table tr:hover {
            background: #f5f5f5;
        }
        
        .product-actions {
            display: flex;
            gap: 10px;
        }
        
        /* Base64编码区域样式 */
        .base64-encoder {
            margin-top: 40px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
            border-left: 4px solid var(--admin-color);
        }
        
        .base64-encoder h3 {
            color: var(--admin-color);
            margin-bottom: 15px;
        }
        
        .drop-area {
            border: 2px dashed #ccc;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            margin-bottom: 15px;
            background: white;
        }
        
        .drop-area:hover {
            border-color: var(--admin-color);
            background: #f0f0f0;
        }
        
        .drop-area.active {
            border-color: var(--admin-color);
            background: var(--primary-light);
        }
        
        .drop-area i {
            font-size: 3rem;
            color: var(--admin-color);
            margin-bottom: 15px;
        }
        
        .drop-area p {
            margin-bottom: 10px;
            color: #555;
        }
        
        .file-input {
            display: none;
        }
        
        .file-info {
            margin-top: 15px;
            padding: 10px;
            background: white;
            border-radius: 8px;
            border: 1px solid #ddd;
            display: none;
        }
        
        .file-info img {
            max-width: 200px;
            max-height: 150px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        .base64-result {
            margin-top: 15px;
            display: none;
        }
        
        .base64-textarea {
            width: 100%;
            height: 120px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: monospace;
            font-size: 12px;
            resize: vertical;
        }
        
        .base64-actions {
            margin-top: 15px;
            display: flex;
            gap: 10px;
        }
        
        /* 版本信息按钮 */
        .version-info-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--primary-color);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: var(--transition);
            z-index: 99;
        }
        
        .version-info-btn:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }
        
        .admin-version-info-btn {
            background: var(--admin-color);
        }
        
        .admin-version-info-btn:hover {
            background: var(--admin-dark);
        }
        
        /* 充值弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }
        
        .recharge-modal {
            background: white;
            border-radius: 16px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            box-shadow: var(--shadow);
            animation: slideUp 0.3s ease;
        }
        
        .recharge-modal h2 {
            text-align: center;
            margin-bottom: 20px;
            color: var(--secondary-color);
            font-size: 1.8rem;
        }
        
        .recharge-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .recharge-option {
            background: var(--white);
            border: 2px solid #ddd;
            border-radius: 12px;
            padding: 15px 10px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .recharge-option:hover {
            border-color: var(--primary-color);
            transform: translateY(-3px);
        }
        
        .recharge-option.selected {
            border-color: var(--primary-color);
            background-color: var(--primary-light);
        }
        
        .recharge-amount {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .recharge-price {
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .recharge-actions {
            display: flex;
            gap: 15px;
        }
        
        .recharge-confirm {
            flex: 2;
            padding: 12px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .recharge-cancel {
            flex: 1;
            padding: 12px;
            background: transparent;
            color: var(--gray);
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .recharge-confirm:hover {
            background: var(--primary-dark);
        }
        
        .recharge-cancel:hover {
            border-color: var(--gray);
        }
        
        /* 成功弹窗样式 */
        .success-modal {
            background: white;
            border-radius: 16px;
            width: 250px;
            height: 250px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            animation: popIn 0.5s ease;
            padding: 20px;
            position: relative;
        }
        
        .success-icon {
            font-size: 3rem;
            color: var(--success-color);
            margin-bottom: 15px;
        }
        
        .success-message {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--secondary-color);
        }
        
        .success-details {
            color: var(--gray);
            font-size: 0.8rem;
            line-height: 1.4;
        }
        
        .countdown-timer {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--success-color);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .success-image {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
            margin-bottom: 15px;
            border: 2px solid var(--primary-light);
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            70% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 背景动画元素 */
        .bg-bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 175, 0, 0.1);
            animation: float 15s infinite ease-in-out;
            z-index: 1;
        }
        
        .admin-bubble {
            background: rgba(142, 68, 173, 0.1);
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) translateX(0); }
            25% { transform: translateY(-20px) translateX(10px); }
            50% { transform: translateY(10px) translateX(-20px); }
            75% { transform: translateY(-15px) translateX(-10px); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-container, .register-container, .admin-login-container {
                padding: 30px 20px;
                margin: 0 20px;
            }
            
            .balance-card {
                margin: 20px;
                padding: 20px;
            }
            
            .balance-amount {
                font-size: 2.8rem;
            }
            
            .action-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .action-btn {
                width: 100%;
            }
            
            .header {
                flex-wrap: wrap;
            }
            
            .header-actions {
                margin-top: 10px;
                width: 100%;
                justify-content: center;
            }
            
            .admin-stats {
                grid-template-columns: 1fr;
            }
            
            .control-group {
                flex-direction: column;
                align-items: stretch;
            }
            
            .user-table, .product-table {
                display: block;
                overflow-x: auto;
            }
            
            .form-row {
                flex-direction: column;
            }
            
            .user-actions, .product-actions {
                flex-direction: column;
                gap: 5px;
            }
            
            .recharge-options {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .recharge-actions {
                flex-direction: column;
            }
            
            .base64-actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div id="login-page">
        <div class="login-container">
            <div class="logo">
                <h1>E<span>币银行</span></h1>
                <p>安全 · 便捷 · 高效的数字资产管理</p>
            </div>
            
            <form class="login-form" id="login-form">
                <div class="form-group">
                    <label for="account">账号</label>
                    <input type="text" id="account" placeholder="请输入4位账号" maxlength="4" required>
                </div>
                
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" placeholder="请输入4位密码" maxlength="4" required>
                </div>
                
                <button type="submit" class="login-btn">
                    <i class="fas fa-sign-in-alt"></i> 登录系统
                </button>
            </form>
            
            <p class="footer-text">还没有账号？<a class="switch-link" id="to-register">立即注册</a></p>
            <p class="footer-text">管理员入口：<a class="switch-link admin-switch-link" id="to-admin-login">主端登录</a></p>
        </div>
    </div>
    
    <!-- 注册页面 -->
    <div id="register-page" style="display: none;">
        <div class="register-container">
            <div class="logo">
                <h1>E<span>币银行</span></h1>
                <p>创建您的数字资产管理账户</p>
            </div>
            
            <form class="register-form" id="register-form">
                <div class="form-group">
                    <label for="reg-account">账号 (4位数字)</label>
                    <input type="text" id="reg-account" placeholder="请输入4位数字账号" maxlength="4" pattern="\d{4}" required>
                </div>
                
                <div class="form-group">
                    <label for="reg-password">密码 (4位数字)</label>
                    <input type="password" id="reg-password" placeholder="请输入4位数字密码" maxlength="4" pattern="\d{4}" required>
                </div>
                
                <div class="form-group">
                    <label for="reg-confirm">确认密码</label>
                    <input type="password" id="reg-confirm" placeholder="请再次输入密码" maxlength="4" required>
                </div>
                
                <button type="submit" class="register-btn">
                    <i class="fas fa-user-plus"></i> 注册新账户
                </button>
            </form>
            
            <p class="footer-text">已有账号？<a class="switch-link" id="to-login">立即登录</a></p>
            <p class="footer-text">管理员入口：<a class="switch-link admin-switch-link" id="to-admin-login-2">主端登录</a></p>
        </div>
    </div>
    
    <!-- 管理员登录页面 -->
    <div id="admin-login-page" style="display: none;">
        <div class="admin-login-container">
            <div class="logo admin-logo">
                <h1>E<span>币银行</span> - 主端</h1>
                <p>管理员控制系统</p>
            </div>
            
            <form class="admin-login-form" id="admin-login-form">
                <div class="form-group">
                    <label for="admin-password">管理员密码</label>
                    <input type="password" id="admin-password" placeholder="请输入管理员密码" required>
                </div>
                
                <button type="submit" class="admin-login-btn">
                    <i class="fas fa-key"></i> 登录主端
                </button>
            </form>
            
            <p class="footer-text">返回用户登录：<a class="switch-link" id="admin-to-login">用户登录</a></p>
        </div>
    </div>
    
    <!-- 主页面 -->
    <div id="main-page">
        <div class="header">
            <button class="nav-btn" id="bill-btn">
                <i class="fas fa-file-invoice"></i> 账单
            </button>
            <div class="header-actions">
                <div class="action-icon" id="help-btn" title="帮助中心">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="action-icon" id="logout-btn" title="退出系统">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="balance-card">
                <h2>您的E币余额</h2>
                <div class="balance-amount">
                    <span class="balance-symbol">E</span>
                    <span id="balance">0</span>
                </div>
                <p>欢迎使用E币银行！</p>
                
                <div class="action-buttons">
                    <button class="action-btn primary-btn" id="trade-btn">
                        <i class="fas fa-shopping-cart"></i> 前往交易
                    </button>
                    <button class="action-btn secondary-btn" id="recharge-btn">
                        <i class="fas fa-coins"></i> 充值E币
                    </button>
                    <button class="action-btn minecraft-btn" id="minecraft-btn">
                        <i class="fas fa-cube"></i> Minecraft
                    </button>
                    <button class="action-btn version-btn" id="version-page-btn">
                        <i class="fas fa-code-branch"></i> 版本历史
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 交易页面 -->
    <div id="trade-page">
        <div class="header">
            <button class="nav-btn" id="back-btn">
                <i class="fas fa-arrow-left"></i> 返回
            </button>
            <div class="header-actions">
                <div class="action-icon" id="trade-help-btn" title="帮助中心">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="action-icon" id="trade-logout-btn" title="退出系统">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
        </div>
        
        <div class="container">
            <h2 class="page-title">数字商品商城</h2>
            
            <div class="products-grid" id="products-grid">
                <!-- 商品将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    
    <!-- 账单页面 -->
    <div id="bill-page">
        <div class="header">
            <button class="nav-btn" id="back-bill-btn">
                <i class="fas fa-arrow-left"></i> 返回
            </button>
            <h2 style="color: var(--secondary-color); flex-grow: 1; text-align: center;">交易账单</h2>
            <div class="header-actions">
                <div class="action-icon" id="bill-help-btn" title="帮助中心">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="action-icon" id="bill-logout-btn" title="退出系统">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="bill-container">
                <h2 class="bill-title">交易记录</h2>
                
                <div class="recent-transaction">
                    <i class="fas fa-clock"></i>
                    <span id="recent-transaction">欢迎新用户！</span>
                </div>
                
                <h3>交易历史</h3>
                <div class="transaction-list" id="transaction-list">
                    <!-- 交易记录将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>
    
    <!-- 帮助页面 -->
    <div id="help-page">
        <div class="header">
            <button class="nav-btn" id="back-help-btn">
                <i class="fas fa-arrow-left"></i> 返回
            </button>
            <h2 style="color: var(--secondary-color); flex-grow: 1; text-align: center;">帮助中心</h2>
            <div class="header-actions">
                <div class="action-icon" id="help-logout-btn" title="退出系统">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="help-container">
                <h2 class="help-title">E币银行使用指南</h2>
                <div class="help-content">
                    <h3>欢迎使用E币银行系统</h3>
                    <p>E币银行是一个数字资产管理平台，帮助您管理E币资产并进行交易。</p>
                    
                    <h3>主要功能</h3>
                    <ul>
                        <li><strong>注册账户</strong> - 使用4位数字账号和密码创建新账户</li>
                        <li><strong>登录系统</strong> - 使用注册的账号密码登录</li>
                        <li><strong>查看余额</strong> - 在主页查看您的E币余额</li>
                        <li><strong>交易功能</strong> - 购买各种数字商品和服务</li>
                        <li><strong>账单记录</strong> - 查看交易历史记录</li>
                        <li><strong>充值功能</strong> - 增加您的E币余额</li>
                        <li><strong>Minecraft专区</strong> - 探索创新的Minecraft游戏体验</li>
                        <li><strong>版本历史</strong> - 查看系统更新记录</li>
                    </ul>
                    
                    <h3>常见问题</h3>
                    <p><strong>Q: 如何注册账户？</strong><br>
                    A: 在登录页面点击"立即注册"，按照提示输入4位数字账号和密码即可。</p>
                    
                    <p><strong>Q: 注册后获得多少E币？</strong><br>
                    A: 新用户注册将获得350E币的开户奖励。</p>
                    
                    <p><strong>Q: 如何购买商品？</strong><br>
                    A: 登录后点击"前往交易"，选择商品和格式，点击"立即购买"。</p>
                    
                    <p><strong>Q: 余额不足怎么办？</strong><br>
                    A: 您可以点击"充值E币"按钮增加您的余额。</p>
                    
                    <h3>版本历史</h3>
                    <p>E币银行系统已经经历了19个版本的迭代开发，每个版本都带来了新的功能和改进。</p>
                    <p>您可以通过点击主页的"版本历史"按钮或右下角的版本图标查看完整的版本历史记录。</p>
                    <p><strong>当前版本：v2.2.0</strong> - 新增Base64图片编码功能，优化了充值弹窗显示。</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Minecraft页面 -->
    <div id="minecraft-page">
        <div class="header">
            <button class="nav-btn" id="back-minecraft-btn">
                <i class="fas fa-arrow-left"></i> 返回
            </button>
            <h2 style="color: var(--secondary-color); flex-grow: 1; text-align: center;">Minecraft专区</h2>
            <div class="header-actions">
                <div class="action-icon" id="minecraft-help-btn" title="帮助中心">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="action-icon" id="minecraft-logout-btn" title="退出系统">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="minecraft-container">
                <div class="minecraft-icon">
                    <i class="fas fa-cube"></i>
                </div>
                <h2 class="minecraft-title">Minecraft专区</h2>
                
                <div class="minecraft-content">
                    <p><span class="minecraft-highlight">你还在担心挖不到矿吗？这个地图能像现实中一样买东西！速通MC！</span></p>
                </div>
                
                <div class="minecraft-feature">
                    <i class="fas fa-store"></i>
                    <div>
                        <h3>现实式交易系统</h3>
                        <p>告别传统的挖矿模式！在我们的地图中，你可以像现实中一样购买所需资源，无需漫长挖掘。</p>
                    </div>
                </div>
                
                <div class="minecraft-feature">
                    <i class="fas fa-bolt"></i>
                    <div>
                        <h3>极速通关体验</h3>
                        <p>专注于游戏的核心乐趣，无需浪费时间在资源收集上，快速体验Minecraft的完整故事线。</p>
                    </div>
                </div>
                
                <div class="minecraft-feature">
                    <i class="fas fa-gem"></i>
                    <div>
                        <h3>稀有资源轻松获取</h3>
                        <p>钻石、下界合金等稀有资源不再难以获得，通过我们的经济系统即可轻松购买。</p>
                    </div>
                </div>
                
                <a href="https://soft.3dmgame.com/down/335239.html" target="_blank" class="minecraft-page-btn">
                    <i class="fas fa-download"></i> 立即下载PCL2
                </a>
                
                <div class="download-info">
                    <h4><i class="fas fa-info-circle"></i> 下载说明</h4>
                    <p>点击上方按钮将跳转到3DM游戏网的MinecraftJAVA版启动器PCL2下载页面，您可以在那里找到2.8.12的PCL2资源。</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 版本历史页面 -->
    <div id="version-page">
        <div class="header">
            <button class="nav-btn" id="back-version-btn">
                <i class="fas fa-arrow-left"></i> 返回
            </button>
            <h2 style="color: var(--secondary-color); flex-grow: 1; text-align: center;">版本历史</h2>
            <div class="header-actions">
                <div class="action-icon" id="version-help-btn" title="帮助中心">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="action-icon" id="version-logout-btn" title="退出系统">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="version-container">
                <h2 class="version-title">E币银行 - 版本历史</h2>
                
                <div class="current-version">
                    <h3>当前版本: v2.2.0</h3>
                </div>
                
                <!-- 版本历史记录 -->
                <!-- 新添加的v2.2.0版本 -->
                <div class="version-card admin-version">
                    <div class="version-header">
                        <div class="version-number">v2.2.0 - Base64图片编码版本</div>
                        <div class="version-date">2025-10-07</div>
                    </div>
                    <ul class="version-features">
                        <li>新增Base64图片编码功能</li>
                        <li>管理员可以上传图片并转换为Base64编码</li>
                        <li>支持拖放和点击上传图片文件</li>
                        <li>将Base64编码应用到充值成功弹窗</li>
                        <li>优化了管理员界面的用户体验</li>
                    </ul>
                </div>
                
                <!-- 新添加的v2.1.0版本 -->
                <div class="version-card warning-version">
                    <div class="version-header">
                        <div class="version-number">v2.1.0 - 主端修复版本</div>
                        <div class="version-date">2025-10-05</div>
                    </div>
                    <ul class="version-features">
                        <li>优化主端系统，提升用户体验</li>
                        <li>新增扣分项，主端操作更方便</li>
                        <li>新增查看用户密码功能</li>
                    </ul>
                </div>
                
                <div class="version-card milestone">
                    <div class="version-header">
                        <div class="version-number">v2.0.1 - 里程碑版本</div>
                        <div class="version-date">2025-09-28</div>
                    </div>
                    <ul class="version-features">
                        <li>添加版本历史记录页面</li>
                        <li>记录所有历史版本和功能更新</li>
                        <li>添加快速访问版本信息的浮动按钮</li>
                    </ul>
                </div>
                
                <div class="version-card admin-version">
                    <div class="version-header">
                        <div class="version-number">v2.0.0 - 主端控制系统</div>
                        <div class="version-date">2025-09-26</div>
                    </div>
                    <ul class="version-features">
                        <li>添加独立的管理员登录界面</li>
                        <li>实现用户管理功能（查看、删除用户）</li>
                        <li>添加E币发放系统</li>
                        <li>创建系统统计面板</li>
                        <li>添加用户搜索功能</li>
                    </ul>
                </div>
                
                <div class="version-card">
                    <div class="version-header">
                        <div class="version-number">v1.3.0 - 交易记录优化</div>
                        <div class="version-date">2025-09-11</div>
                    </div>
                    <ul class="version-features">
                        <li>将"最近交易"从主页移至账单页面</li>
                        <li>完善交易历史记录显示</li>
                        <li>添加交易分类和颜色标识</li>
                        <li>优化账单页面布局和响应式设计</li>
                    </ul>
                </div>
                
                <div class="version-card">
                    <div class="version-header">
                        <div class="version-number">v1.2.2 - Minecraft专区</div>
                        <div class="version-date">2025-08-28</div>
                    </div>
                    <ul class="version-features">
                        <li>添加Minecraft专属页面</li>
                        <li>介绍创新交易系统地图</li>
                        <li>添加下载链接和说明</li>
                        <li>优化游戏特色介绍</li>
                    </ul>
                </div>
                
                <div class="version-card">
                    <div class="version-header">
                        <div class="version-number">v1.0.1 - 基础版本</div>
                        <div class="version-date">2025-08-13</div>
                    </div>
                    <ul class="version-features">
                        <li>创建基础项目结构</li>
                        <li>实现用户登录界面</li>
                        <li>添加基本样式和布局</li>
                        <li>实现页面切换功能</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 管理员页面 -->
    <div id="admin-page">
        <div class="header admin-header">
            <button class="nav-btn admin-nav-btn" id="admin-back-btn">
                <i class="fas fa-arrow-left"></i> 返回
            </button>
            <h2 style="color: white; flex-grow: 1; text-align: center;">E币银行 - 主端控制系统</h2>
            <div class="header-actions">
                <div class="action-icon admin-action-icon" id="admin-help-btn" title="帮助中心">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="action-icon admin-action-icon" id="admin-logout-btn" title="退出系统">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="admin-container">
                <h2 class="admin-title">主端控制面板</h2>
                
                <div class="admin-stats">
                    <div class="stat-card">
                        <h3>总用户数</h3>
                        <div class="stat-value" id="total-users">0</div>
                    </div>
                    <div class="stat-card">
                        <h3>总E币余额</h3>
                        <div class="stat-value" id="total-balance">0</div>
                    </div>
                    <div class="stat-card">
                        <h3>今日交易数</h3>
                        <div class="stat-value" id="today-transactions">0</div>
                    </div>
                    <div class="stat-card">
                        <h3>商品总数</h3>
                        <div class="stat-value" id="total-products">0</div>
                    </div>
                </div>
                
                <div class="admin-controls">
                    <h3>用户管理</h3>
                    
                    <div class="control-group">
                        <input type="text" id="user-search" class="control-input" placeholder="搜索用户账号...">
                        <button class="control-btn" id="search-user-btn">
                            <i class="fas fa-search"></i> 搜索用户
                        </button>
                    </div>
                    
                    <div class="control-group">
                        <input type="text" id="user-id" class="control-input" placeholder="用户账号">
                        <input type="number" id="e-coin-amount" class="control-input" placeholder="E币数量">
                        <button class="control-btn success-btn" id="add-e-coin-btn">
                            <i class="fas fa-plus"></i> 发放E币
                        </button>
                        <button class="control-btn warning-btn" id="deduct-e-coin-btn">
                            <i class="fas fa-minus"></i> 扣除E币
                        </button>
                    </div>
                    
                    <div class="control-group">
                        <input type="text" id="delete-user-id" class="control-input" placeholder="要删除的用户账号">
                        <button class="control-btn danger-btn" id="delete-user-btn">
                            <i class="fas fa-trash"></i> 删除用户
                        </button>
                    </div>
                </div>
                
                <div class="users-list">
                    <h3>所有用户</h3>
                    <table class="user-table">
                        <thead>
                            <tr>
                                <th>账号</th>
                                <th>密码</th>
                                <th>E币余额</th>
                                <th>交易次数</th>
                                <th>最后登录</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="users-table-body">
                            <!-- 用户数据将通过JavaScript动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <div class="products-management">
                    <h3>商品管理</h3>
                    
                    <div class="product-form">
                        <h4>添加/编辑商品</h4>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="product-id">商品ID</label>
                                <input type="text" id="product-id" class="control-input" placeholder="商品唯一ID">
                            </div>
                            <div class="form-group">
                                <label for="product-name">商品名称</label>
                                <input type="text" id="product-name" class="control-input" placeholder="商品名称">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="product-price">价格 (E币)</label>
                                <input type="number" id="product-price" class="control-input" placeholder="商品价格" step="any">
                            </div>
                            <div class="form-group">
                                <label for="product-category">商品分类</label>
                                <select id="product-category" class="control-input">
                                    <option value="会员">会员</option>
                                    <option value="收藏品">收藏品</option>
                                    <option value="游戏">游戏</option>
                                    <option value="实体">实体</option>
                                    <option value="福利">福利</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="product-description">商品描述</label>
                            <textarea id="product-description" class="control-input" placeholder="商品描述"></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="product-tag">商品标签</label>
                                <input type="text" id="product-tag" class="control-input" placeholder="热销/新品/限时">
                            </div>
                            <div class="form-group">
                                <label for="product-status">商品状态</label>
                                <select id="product-status" class="control-input">
                                    <option value="active">上架</option>
                                    <option value="inactive">下架</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group">
                            <button class="control-btn success-btn" id="add-product-btn">
                                <i class="fas fa-plus"></i> 添加商品
                            </button>
                            <button class="control-btn" id="update-product-btn">
                                <i class="fas fa-edit"></i> 更新商品
                            </button>
                            <button class="control-btn danger-btn" id="clear-product-form-btn">
                                <i class="fas fa-times"></i> 清空表单
                            </button>
                        </div>
                    </div>
                    
                    <h4>商品列表</h4>
                    <table class="product-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>价格</th>
                                <th>分类</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="products-table-body">
                            <!-- 商品数据将通过JavaScript动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 新增Base64编码区域 -->
                <div class="base64-encoder">
                    <h3>Base64图片编码器</h3>
                    <p>将图片转换为Base64编码，用于充值成功弹窗显示</p>
                    
                    <div class="drop-area" id="drop-area">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <p>拖放图片文件到此处，或点击选择文件</p>
                        <p class="small">支持 JPG, PNG, GIF 格式</p>
                        <input type="file" id="file-input" class="file-input" accept="image/*">
                    </div>
                    
                    <div class="file-info" id="file-info">
                        <h4>文件信息:</h4>
                        <div id="file-preview"></div>
                        <p>文件名: <span id="file-name"></span></p>
                        <p>文件大小: <span id="file-size"></span></p>
                        <p>文件类型: <span id="file-type"></span></p>
                    </div>
                    
                    <div class="base64-result" id="base64-result">
                        <h4>Base64编码结果:</h4>
                        <textarea class="base64-textarea" id="base64-textarea" readonly></textarea>
                        <div class="base64-actions">
                            <button class="control-btn" id="copy-base64-btn">
                                <i class="fas fa-copy"></i> 复制编码
                            </button>
                            <button class="control-btn success-btn" id="apply-base64-btn">
                                <i class="fas fa-check"></i> 应用到充值弹窗
                            </button>
                            <button class="control-btn danger-btn" id="clear-base64-btn">
                                <i class="fas fa-times"></i> 清除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 版本信息按钮 -->
    <div class="version-info-btn" id="version-btn" title="版本历史">
        <i class="fas fa-code-branch"></i>
    </div>

    <!-- 隐藏的SEO内容 -->
    <div style="display: none;" aria-hidden="true">
        <h1>E币银行 - 数字资产管理平台</h1>
        <p>E币银行是一个安全、便捷、高效的数字资产管理平台，提供E币交易、充值、账单管理和Minecraft游戏专区等功能。</p>
        <h2>主要功能</h2>
        <ul>
            <li>E币交易</li>
            <li>数字资产管理</li>
            <li>在线充值</li>
            <li>账单记录</li>
            <li>Minecraft游戏专区</li>
            <li>版本历史记录</li>
            <li>Base64图片编码</li>
        </ul>
        <p>关键词: E币银行, 数字资产, 虚拟货币, 在线交易, Minecraft, 游戏充值, 数字商品</p>
    </div>

    <script>
        // 数据存储工具 - 解决独立访问问题
        const StorageHelper = {
            // 检查localStorage是否可用
            isLocalStorageAvailable: function() {
                try {
                    const test = 'test';
                    localStorage.setItem(test, test);
                    localStorage.removeItem(test);
                    return true;
                } catch(e) {
                    return false;
                }
            },
            
            // 获取数据
            getItem: function(key) {
                if (this.isLocalStorageAvailable()) {
                    return localStorage.getItem(key);
                } else {
                    // 使用内存存储作为回退方案
                    return this.memoryStorage[key] || null;
                }
            },
            
            // 设置数据
            setItem: function(key, value) {
                if (this.isLocalStorageAvailable()) {
                    localStorage.setItem(key, value);
                } else {
                    // 使用内存存储作为回退方案
                    this.memoryStorage[key] = value;
                }
            },
            
            // 内存存储回退
            memoryStorage: {}
        };
        
        // 用户账户存储（使用StorageHelper）
        let userAccounts = StorageHelper.getItem('eBankUsers') ? JSON.parse(StorageHelper.getItem('eBankUsers')) : [];
        
        // 商品数据存储 - 添加一个负价格商品作为示例
        let products = StorageHelper.getItem('eBankProducts') ? JSON.parse(StorageHelper.getItem('eBankProducts')) : [
            {
                id: 'member001',
                name: '高级会员套餐',
                price: 1200,
                category: '会员',
                description: '享受高级会员特权',
                tag: '热销',
                status: 'active',
                formats: [
                    { value: 'monthly', text: '月度会员 - E 1,200', price: 1200 },
                    { value: 'quarterly', text: '季度会员 - E 3,000 (省600)', price: 3000 },
                    { value: 'yearly', text: '年度会员 - E 10,000 (省4,400)', price: 10000 }
                ]
            },
            {
                id: 'collectible001',
                name: '独家数字收藏品',
                price: 800,
                category: '收藏品',
                description: '限量版数字收藏品',
                tag: '新品',
                status: 'active',
                formats: [
                    { value: 'standard', text: '标准版 - E 800', price: 800 },
                    { value: 'gold', text: '黄金版 - E 1,500', price: 1500 },
                    { value: 'deluxe', text: '典藏版 - E 2,500', price: 2500 }
                ]
            },
            {
                id: 'bonus001',
                name: '每日福利',
                price: -50,
                category: '福利',
                description: '每日免费领取50E币',
                tag: '福利',
                status: 'active'
            }
        ];
        
        // 当前用户状态
        let currentUser = null;
        let isAdmin = false;
        
        // 充值选项
        const rechargeOptions = [
            { amount: 50, price: 0.05 },
            { amount: 100, price: 0.1 },
            { amount: 200, price: 0.2 },
            { amount: 500, price: 0.5 },
            { amount: 1000, price: 1 }
        ];
        
        // 存储Base64图片数据
        let currentBase64Image = '';
        
        // DOM元素
        const loginPage = document.getElementById('login-page');
        const registerPage = document.getElementById('register-page');
        const adminLoginPage = document.getElementById('admin-login-page');
        const mainPage = document.getElementById('main-page');
        const tradePage = document.getElementById('trade-page');
        const billPage = document.getElementById('bill-page');
        const helpPage = document.getElementById('help-page');
        const minecraftPage = document.getElementById('minecraft-page');
        const versionPage = document.getElementById('version-page');
        const adminPage = document.getElementById('admin-page');
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');
        const adminLoginForm = document.getElementById('admin-login-form');
        const balanceDisplay = document.getElementById('balance');
        const recentTransaction = document.getElementById('recent-transaction');
        const transactionList = document.getElementById('transaction-list');
        const productsGrid = document.getElementById('products-grid');
        
        // 管理员页面元素
        const totalUsers = document.getElementById('total-users');
        const totalBalance = document.getElementById('total-balance');
        const todayTransactions = document.getElementById('today-transactions');
        const totalProducts = document.getElementById('total-products');
        const usersTableBody = document.getElementById('users-table-body');
        const userSearch = document.getElementById('user-search');
        const searchUserBtn = document.getElementById('search-user-btn');
        const userId = document.getElementById('user-id');
        const eCoinAmount = document.getElementById('e-coin-amount');
        const addECoinBtn = document.getElementById('add-e-coin-btn');
        const deductECoinBtn = document.getElementById('deduct-e-coin-btn');
        const deleteUserId = document.getElementById('delete-user-id');
        const deleteUserBtn = document.getElementById('delete-user-btn');
        
        // 商品管理元素
        const productId = document.getElementById('product-id');
        const productName = document.getElementById('product-name');
        const productPrice = document.getElementById('product-price');
        const productCategory = document.getElementById('product-category');
        const productDescription = document.getElementById('product-description');
        const productTag = document.getElementById('product-tag');
        const productStatus = document.getElementById('product-status');
        const addProductBtn = document.getElementById('add-product-btn');
        const updateProductBtn = document.getElementById('update-product-btn');
        const clearProductFormBtn = document.getElementById('clear-product-form-btn');
        const productsTableBody = document.getElementById('products-table-body');
        
        // Base64编码相关元素
        const dropArea = document.getElementById('drop-area');
        const fileInput = document.getElementById('file-input');
        const fileInfo = document.getElementById('file-info');
        const filePreview = document.getElementById('file-preview');
        const fileName = document.getElementById('file-name');
        const fileSize = document.getElementById('file-size');
        const fileType = document.getElementById('file-type');
        const base64Result = document.getElementById('base64-result');
        const base64Textarea = document.getElementById('base64-textarea');
        const copyBase64Btn = document.getElementById('copy-base64-btn');
        const applyBase64Btn = document.getElementById('apply-base64-btn');
        const clearBase64Btn = document.getElementById('clear-base64-btn');
        
        // 页面切换函数
        function showPage(page) {
            // 隐藏所有页面
            loginPage.style.display = 'none';
            registerPage.style.display = 'none';
            adminLoginPage.style.display = 'none';
            mainPage.style.display = 'none';
            tradePage.style.display = 'none';
            billPage.style.display = 'none';
            helpPage.style.display = 'none';
            minecraftPage.style.display = 'none';
            versionPage.style.display = 'none';
            adminPage.style.display = 'none';
            
            // 显示指定页面
            page.style.display = 'block';
            
            // 如果显示账单页面，更新交易记录
            if (page === billPage) {
                updateTransactionDisplay();
            }
            
            // 如果显示交易页面，更新商品显示
            if (page === tradePage) {
                updateProductsDisplay();
            }
            
            // 如果显示管理员页面，更新统计数据
            if (page === adminPage) {
                updateAdminStats();
            }
            
            // 根据当前页面调整版本按钮样式
            const versionBtn = document.getElementById('version-btn');
            if (page === mainPage || page === tradePage || page === billPage || 
                page === helpPage || page === minecraftPage || page === versionPage || page === adminPage) {
                versionBtn.style.display = 'flex';
                if (page === adminPage) {
                    versionBtn.classList.add('admin-version-info-btn');
                } else {
                    versionBtn.classList.remove('admin-version-info-btn');
                }
            } else {
                versionBtn.style.display = 'none';
            }
            
            // 更新URL哈希
            updateURLHash(page.id);
        }
        
        // 更新URL哈希以实现独立URL访问
        function updateURLHash(pageId) {
            const hash = pageId.replace('-page', '');
            window.location.hash = hash;
        }
        
        // 处理URL哈希变化
        function handleHashChange() {
            const hash = window.location.hash.substring(1);
            let targetPage = loginPage;
            
            switch(hash) {
                case 'login':
                    targetPage = loginPage;
                    break;
                case 'register':
                    targetPage = registerPage;
                    break;
                case 'admin-login':
                    targetPage = adminLoginPage;
                    break;
                case 'main':
                    if (currentUser || isAdmin) {
                        targetPage = isAdmin ? adminPage : mainPage;
                    } else {
                        targetPage = loginPage;
                    }
                    break;
                case 'trade':
                    if (currentUser) {
                        targetPage = tradePage;
                    } else {
                        targetPage = loginPage;
                    }
                    break;
                case 'bill':
                    if (currentUser) {
                        targetPage = billPage;
                    } else {
                        targetPage = loginPage;
                    }
                    break;
                case 'help':
                    if (currentUser || isAdmin) {
                        targetPage = helpPage;
                    } else {
                        targetPage = loginPage;
                    }
                    break;
                case 'minecraft':
                    if (currentUser) {
                        targetPage = minecraftPage;
                    } else {
                        targetPage = loginPage;
                    }
                    break;
                case 'version':
                    if (currentUser || isAdmin) {
                        targetPage = versionPage;
                    } else {
                        targetPage = loginPage;
                    }
                    break;
                case 'admin':
                    if (isAdmin) {
                        targetPage = adminPage;
                    } else {
                        targetPage = adminLoginPage;
                    }
                    break;
                default:
                    targetPage = loginPage;
            }
            
            showPage(targetPage);
        }
        
        // 登录功能
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const account = document.getElementById('account').value;
            const password = document.getElementById('password').value;
            
            // 验证账号密码
            const user = userAccounts.find(u => u.id === account && u.password === password);
            
            if (user) {
                currentUser = user;
                isAdmin = false;
                updateUserDisplay();
                showPage(mainPage);
            } else {
                alert('账号或密码错误，请重试！或注册新账号');
            }
        });
        
        // 注册功能
        registerForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const account = document.getElementById('reg-account').value;
            const password = document.getElementById('reg-password').value;
            const confirm = document.getElementById('reg-confirm').value;
            
            // 验证输入
            if (!/^\d{4}$/.test(account)) {
                alert('账号必须是4位数字！');
                return;
            }
            
            if (!/^\d{4}$/.test(password)) {
                alert('密码必须是4位数字！');
                return;
            }
            
            if (password !== confirm) {
                alert('两次输入的密码不一致！');
                return;
            }
            
            // 检查账号是否已存在
            if (userAccounts.some(u => u.id === account)) {
                alert('该账号已被注册！');
                return;
            }
            
            // 创建新用户
            const newUser = {
                id: account,
                password: password,
                balance: 350, // 新用户赠送350E币
                transactions: [{
                    date: new Date().toLocaleDateString(),
                    type: '开户奖励',
                    amount: 350,
                    balance: 350
                }],
                lastLogin: new Date().toLocaleDateString()
            };
            
            userAccounts.push(newUser);
            // 保存到本地存储
            StorageHelper.setItem('eBankUsers', JSON.stringify(userAccounts));
            
            currentUser = newUser;
            isAdmin = false;
            updateUserDisplay();
            showPage(mainPage);
            
            // 重置注册表单
            registerForm.reset();
            
            alert('注册成功！您获得了350E币的开户奖励！');
        });
        
        // 管理员登录功能
        adminLoginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const password = document.getElementById('admin-password').value;
            const adminPassword = '2014112002'; // 固定管理员密码
            
            if (password === adminPassword) {
                isAdmin = true;
                currentUser = null;
                updateAdminStats();
                showPage(adminPage);
            } else {
                alert('管理员密码错误！');
            }
        });
        
        // 更新用户显示信息
        function updateUserDisplay() {
            if (!currentUser) return;
            
            balanceDisplay.textContent = currentUser.balance.toLocaleString();
            
            // 更新最近交易信息（现在显示在账单页面）
            if (currentUser.transactions.length > 0) {
                const lastTx = currentUser.transactions[currentUser.transactions.length - 1];
                recentTransaction.textContent = `最近交易: ${lastTx.date} ${lastTx.type} ${lastTx.amount > 0 ? '+' : ''}${lastTx.amount}E币`;
            } else {
                recentTransaction.textContent = '暂无交易记录';
            }
        }
        
        // 更新交易记录显示
        function updateTransactionDisplay() {
            if (!currentUser) return;
            
            // 清空交易列表
            transactionList.innerHTML = '';
            
            if (currentUser.transactions.length === 0) {
                transactionList.innerHTML = `
                    <div class="no-transactions">
                        <i class="fas fa-file-invoice"></i>
                        <h3>暂无交易记录</h3>
                        <p>您还没有任何交易记录</p>
                    </div>
                `;
                return;
            }
            
            // 按日期排序（最新的在前面）
            const sortedTransactions = [...currentUser.transactions].reverse();
            
            // 添加交易记录
            sortedTransactions.forEach(tx => {
                const transactionItem = document.createElement('div');
                transactionItem.className = 'transaction-item';
                
                transactionItem.innerHTML = `
                    <div>
                        <div class="transaction-date">${tx.date}</div>
                        <div class="transaction-type">${tx.type}</div>
                    </div>
                    <div style="text-align: right;">
                        <div class="transaction-amount ${tx.amount > 0 ? 'positive' : 'negative'}">
                            ${tx.amount > 0 ? '+' : ''}${tx.amount} E币
                        </div>
                        <div class="transaction-balance">余额: ${tx.balance} E币</div>
                    </div>
                `;
                
                transactionList.appendChild(transactionItem);
            });
        }
        
        // 更新商品显示
        function updateProductsDisplay() {
            if (!currentUser) return;
            
            // 清空商品网格
            productsGrid.innerHTML = '';
            
            // 只显示上架的商品
            const activeProducts = products.filter(product => product.status === 'active');
            
            if (activeProducts.length === 0) {
                productsGrid.innerHTML = `
                    <div class="no-transactions" style="grid-column: 1 / -1;">
                        <i class="fas fa-box-open"></i>
                        <h3>暂无商品</h3>
                        <p>管理员正在准备上架商品，请稍后再来</p>
                    </div>
                `;
                return;
            }
            
            // 添加商品卡片
            activeProducts.forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'product-card';
                
                // 根据商品类别设置不同的背景颜色
                let bgColor = 'linear-gradient(45deg, #3498db, #2c3e50)';
                if (product.category === '收藏品') {
                    bgColor = 'linear-gradient(45deg, #9b59b6, #8e44ad)';
                } else if (product.category === '游戏') {
                    bgColor = 'linear-gradient(45deg, #27ae60, #2ecc71)';
                } else if (product.category === '福利') {
                    bgColor = 'linear-gradient(45deg, #f39c12, #e67e22)';
                }
                
                productCard.innerHTML = `
                    <div class="product-img" style="background: ${bgColor};">
                        <div class="product-tag">${product.tag}</div>
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">${product.name}</h3>
                        <div class="product-price">${product.price >= 0 ? 'E' : '获得 E'} ${Math.abs(product.price).toLocaleString()}</div>
                        <p>${product.description}</p>
                        ${product.formats ? `
                        <select class="format-select" onchange="updateProductPrice(this, '${product.id}')">
                            ${product.formats.map(format => 
                                `<option value="${format.value}" data-price="${format.price}">${format.text}</option>`
                            ).join('')}
                        </select>
                        ` : ''}
                        <button class="buy-btn" data-product-id="${product.id}">
                            <i class="fas fa-shopping-bag"></i> ${product.price >= 0 ? '立即购买' : '免费领取'}
                        </button>
                    </div>
                `;
                
                productsGrid.appendChild(productCard);
            });
            
            // 添加购买按钮事件监听器
            document.querySelectorAll('.buy-btn').forEach(button => {
                button.addEventListener('click', function() {
                    if (!currentUser) {
                        alert('请先登录！');
                        return;
                    }
                    
                    const productId = this.getAttribute('data-product-id');
                    const product = products.find(p => p.id === productId);
                    
                    if (!product) {
                        alert('商品不存在！');
                        return;
                    }
                    
                    let price = product.price;
                    let productName = product.name;
                    
                    // 检查是否有格式选择
                    const selectElement = this.closest('.product-card').querySelector('.format-select');
                    if (selectElement) {
                        const selectedOption = selectElement.options[selectElement.selectedIndex];
                        price = parseInt(selectedOption.getAttribute('data-price'));
                        const format = selectedOption.textContent.split(' - ')[0];
                        productName = `${product.name} (${format})`;
                    }
                    
                    // 处理负价格商品（用户获得E币）
                    if (price < 0) {
                        currentUser.balance += Math.abs(price);
                        
                        // 记录交易
                        currentUser.transactions.push({
                            date: new Date().toLocaleDateString(),
                            type: `领取 ${productName}`,
                            amount: Math.abs(price),
                            balance: currentUser.balance
                        });
                        
                        // 更新本地存储
                        const userIndex = userAccounts.findIndex(u => u.id === currentUser.id);
                        userAccounts[userIndex] = currentUser;
                        StorageHelper.setItem('eBankUsers', JSON.stringify(userAccounts));
                        
                        updateUserDisplay();
                        
                        alert(`领取成功！\n商品：${productName}\n获得：E ${Math.abs(price).toLocaleString()}\n余额：E ${currentUser.balance.toLocaleString()}`);
                    } else {
                        // 处理正价格商品（用户支付E币）
                        if (currentUser.balance >= price) {
                            currentUser.balance -= price;
                            
                            // 记录交易
                            currentUser.transactions.push({
                                date: new Date().toLocaleDateString(),
                                type: `购买 ${productName}`,
                                amount: -price,
                                balance: currentUser.balance
                            });
                            
                            // 更新本地存储
                            const userIndex = userAccounts.findIndex(u => u.id === currentUser.id);
                            userAccounts[userIndex] = currentUser;
                            StorageHelper.setItem('eBankUsers', JSON.stringify(userAccounts));
                            
                            updateUserDisplay();
                            
                            alert(`购买成功！\n商品：${productName}\n价格：E ${price.toLocaleString()}\n余额：E ${currentUser.balance.toLocaleString()}`);
                        } else {
                            alert('E币余额不足，请充值！');
                        }
                    }
                });
            });
        }
        
        // 更新商品价格显示
        function updateProductPrice(selectElement, productId) {
            const selectedOption = selectElement.options[selectElement.selectedIndex];
            const price = selectedOption.getAttribute('data-price');
            const priceElement = selectElement.closest('.product-info').querySelector('.product-price');
            const priceNum = Number(price);
            priceElement.textContent = `${priceNum >= 0 ? 'E' : '获得 E'} ${Math.abs(priceNum).toLocaleString()}`;
        }
        
        // 更新管理员统计数据
        function updateAdminStats() {
            if (!isAdmin) return;
            
            // 计算总用户数
            totalUsers.textContent = userAccounts.length;
            
            // 计算总E币余额
            const total = userAccounts.reduce((sum, user) => sum + user.balance, 0);
            totalBalance.textContent = total.toLocaleString();
            
            // 计算今日交易数
            const today = new Date().toLocaleDateString();
            const todayTxCount = userAccounts.reduce((count, user) => {
                return count + user.transactions.filter(tx => tx.date === today).length;
            }, 0);
            todayTransactions.textContent = todayTxCount;
            
            // 计算商品总数
            totalProducts.textContent = products.length;
            
            // 更新用户表格
            updateUsersTable();
            
            // 更新商品表格
            updateProductsTable();
        }
        
        // 更新用户表格
        function updateUsersTable() {
            usersTableBody.innerHTML = '';
            
            if (userAccounts.length === 0) {
                usersTableBody.innerHTML = `
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 40px;">
                            <i class="fas fa-users" style="font-size: 3rem; color: #ddd; margin-bottom: 15px;"></i>
                            <p>暂无用户数据</p>
                        </td>
                    </tr>
                `;
                return;
            }
            
            userAccounts.forEach(user => {
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td>${user.id}</td>
                    <td>
                        <div class="password-display">
                            <span class="password-masked">****</span>
                            <span class="password-actual" style="display: none;">${user.password}</span>
                            <button class="user-action-btn password-btn" data-user-id="${user.id}">
                                <i class="fas fa-eye"></i> 显示
                            </button>
                        </div>
                    </td>
                    <td>${user.balance.toLocaleString()} E币</td>
                    <td>${user.transactions.length}</td>
                    <td>${user.lastLogin || '未知'}</td>
                    <td>
                        <div class="user-actions">
                            <button class="user-action-btn view-btn" data-user-id="${user.id}">
                                <i class="fas fa-eye"></i> 查看
                            </button>
                            <button class="user-action-btn deduct-btn" data-user-id="${user.id}">
                                <i class="fas fa-minus"></i> 扣分
                            </button>
                            <button class="user-action-btn delete-btn" data-user-id="${user.id}">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </td>
                `;
                
                usersTableBody.appendChild(row);
            });
            
            // 添加事件监听器
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    viewUserDetails(userId);
                });
            });
            
            document.querySelectorAll('.deduct-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    deductUserPoints(userId);
                });
            });
            
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    deleteUser(userId);
                });
            });
            
            // 添加密码显示/隐藏功能
            document.querySelectorAll('.password-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    const passwordDisplay = this.closest('.password-display');
                    const masked = passwordDisplay.querySelector('.password-masked');
                    const actual = passwordDisplay.querySelector('.password-actual');
                    const icon = this.querySelector('i');
                    
                    if (masked.style.display !== 'none') {
                        // 显示密码
                        masked.style.display = 'none';
                        actual.style.display = 'inline';
                        this.innerHTML = '<i class="fas fa-eye-slash"></i> 隐藏';
                    } else {
                        // 隐藏密码
                        masked.style.display = 'inline';
                        actual.style.display = 'none';
                        this.innerHTML = '<i class="fas fa-eye"></i> 显示';
                    }
                });
            });
        }
        
        // 查看用户详情
        function viewUserDetails(userId) {
            const user = userAccounts.find(u => u.id === userId);
            if (!user) {
                alert('用户不存在！');
                return;
            }
            
            let transactionsText = '';
            user.transactions.forEach(tx => {
                transactionsText += `${tx.date} - ${tx.type}: ${tx.amount > 0 ? '+' : ''}${tx.amount} E币\n`;
            });
            
            alert(`用户账号: ${user.id}\n密码: ${user.password}\nE币余额: ${user.balance}\n交易次数: ${user.transactions.length}\n最后登录: ${user.lastLogin || '未知'}\n\n交易记录:\n${transactionsText}`);
        }
        
        // 扣除用户E币
        function deductUserPoints(userId) {
            const user = userAccounts.find(u => u.id === userId);
            if (!user) {
                alert('用户不存在！');
                return;
            }
            
            const amount = parseInt(prompt(`请输入要扣除的E币数量 (用户当前余额: ${user.balance} E币):`));
            
            if (!amount || amount <= 0) {
                alert('请输入有效的E币数量！');
                return;
            }
            
            if (amount > user.balance) {
                alert('扣除的E币数量不能超过用户当前余额！');
                return;
            }
            
            user.balance -= amount;
            user.transactions.push({
                date: new Date().toLocaleDateString(),
                type: '管理员扣除',
                amount: -amount,
                balance: user.balance
            });
            
            StorageHelper.setItem('eBankUsers', JSON.stringify(userAccounts));
            
            updateAdminStats();
            alert(`已扣除用户 ${userId} ${amount} E币！`);
        }
        
        // 删除用户
        function deleteUser(userId) {
            if (!confirm(`确定要删除用户 ${userId} 吗？此操作不可撤销！`)) {
                return;
            }
            
            const userIndex = userAccounts.findIndex(u => u.id === userId);
            if (userIndex === -1) {
                alert('用户不存在！');
                return;
            }
            
            userAccounts.splice(userIndex, 1);
            StorageHelper.setItem('eBankUsers', JSON.stringify(userAccounts));
            
            updateAdminStats();
            alert(`用户 ${userId} 已成功删除！`);
        }
        
        // 搜索用户
        searchUserBtn.addEventListener('click', function() {
            const searchTerm = userSearch.value.trim();
            if (!searchTerm) {
                updateUsersTable();
                return;
            }
            
            const filteredUsers = userAccounts.filter(user => 
                user.id.includes(searchTerm)
            );
            
            usersTableBody.innerHTML = '';
            
            if (filteredUsers.length === 0) {
                usersTableBody.innerHTML = `
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 40px;">
                            <i class="fas fa-search" style="font-size: 3rem; color: #ddd; margin-bottom: 15px;"></i>
                            <p>未找到匹配的用户</p>
                        </td>
                    </tr>
                `;
                return;
            }
            
            filteredUsers.forEach(user => {
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td>${user.id}</td>
                    <td>
                        <div class="password-display">
                            <span class="password-masked">****</span>
                            <span class="password-actual" style="display: none;">${user.password}</span>
                            <button class="user-action-btn password-btn" data-user-id="${user.id}">
                                <i class="fas fa-eye"></i> 显示
                            </button>
                        </div>
                    </td>
                    <td>${user.balance.toLocaleString()} E币</td>
                    <td>${user.transactions.length}</td>
                    <td>${user.lastLogin || '未知'}</td>
                    <td>
                        <div class="user-actions">
                            <button class="user-action-btn view-btn" data-user-id="${user.id}">
                                <i class="fas fa-eye"></i> 查看
                            </button>
                            <button class="user-action-btn delete-btn" data-user-id="${user.id}">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </td>
                `;
                
                usersTableBody.appendChild(row);
            });
            
            // 添加事件监听器
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    viewUserDetails(userId);
                });
            });
            
            document.querySelectorAll('.deduct-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    deductUserPoints(userId);
                });
            });
            
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    deleteUser(userId);
                });
            });
            
            // 添加密码显示/隐藏功能
            document.querySelectorAll('.password-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    const passwordDisplay = this.closest('.password-display');
                    const masked = passwordDisplay.querySelector('.password-masked');
                    const actual = passwordDisplay.querySelector('.password-actual');
                    const icon = this.querySelector('i');
                    
                    if (masked.style.display !== 'none') {
                        // 显示密码
                        masked.style.display = 'none';
                        actual.style.display = 'inline';
                        this.innerHTML = '<i class="fas fa-eye-slash"></i> 隐藏';
                    } else {
                        // 隐藏密码
                        masked.style.display = 'inline';
                        actual.style.display = 'none';
                        this.innerHTML = '<i class="fas fa-eye"></i> 显示';
                    }
                });
            });
        });
        
        // 发放E币
        addECoinBtn.addEventListener('click', function() {
            const userIdValue = userId.value.trim();
            const amount = parseInt(eCoinAmount.value);
            
            if (!userIdValue) {
                alert('请输入用户账号！');
                return;
            }
            
            if (!amount || amount <= 0) {
                alert('请输入有效的E币数量！');
                return;
            }
            
            const user = userAccounts.find(u => u.id === userIdValue);
            if (!user) {
                alert('用户不存在！');
                return;
            }
            
            user.balance += amount;
            user.transactions.push({
                date: new Date().toLocaleDateString(),
                type: '管理员发放',
                amount: amount,
                balance: user.balance
            });
            
            StorageHelper.setItem('eBankUsers', JSON.stringify(userAccounts));
            
            updateAdminStats();
            alert(`已向用户 ${userIdValue} 发放 ${amount} E币！`);
            
            // 清空输入框
            userId.value = '';
            eCoinAmount.value = '';
        });
        
        // 扣除E币
        deductECoinBtn.addEventListener('click', function() {
            const userIdValue = userId.value.trim();
            const amount = parseInt(eCoinAmount.value);
            
            if (!userIdValue) {
                alert('请输入用户账号！');
                return;
            }
            
            if (!amount || amount <= 0) {
                alert('请输入有效的E币数量！');
                return;
            }
            
            const user = userAccounts.find(u => u.id === userIdValue);
            if (!user) {
                alert('用户不存在！');
                return;
            }
            
            if (amount > user.balance) {
                alert('扣除的E币数量不能超过用户当前余额！');
                return;
            }
            
            user.balance -= amount;
            user.transactions.push({
                date: new Date().toLocaleDateString(),
                type: '管理员扣除',
                amount: -amount,
                balance: user.balance
            });
            
            StorageHelper.setItem('eBankUsers', JSON.stringify(userAccounts));
            
            updateAdminStats();
            alert(`已扣除用户 ${userIdValue} ${amount} E币！`);
            
            // 清空输入框
            userId.value = '';
            eCoinAmount.value = '';
        });
        
        // 删除用户（通过输入框）
        deleteUserBtn.addEventListener('click', function() {
            const userIdValue = deleteUserId.value.trim();
            
            if (!userIdValue) {
                alert('请输入要删除的用户账号！');
                return;
            }
            
            deleteUser(userIdValue);
            deleteUserId.value = '';
        });
        
        // 更新商品表格
        function updateProductsTable() {
            productsTableBody.innerHTML = '';
            
            if (products.length === 0) {
                productsTableBody.innerHTML = `
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 40px;">
                            <i class="fas fa-box-open" style="font-size: 3rem; color: #ddd; margin-bottom: 15px;"></i>
                            <p>暂无商品数据</p>
                        </td>
                    </tr>
                `;
                return;
            }
            
            products.forEach(product => {
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td>${product.id}</td>
                    <td>${product.name}</td>
                    <td>${product.price >= 0 ? 'E' : '获得 E'} ${Math.abs(product.price).toLocaleString()}</td>
                    <td>${product.category}</td>
                    <td>${product.status === 'active' ? '上架' : '下架'}</td>
                    <td>
                        <div class="product-actions">
                            <button class="user-action-btn view-btn" data-product-id="${product.id}">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="user-action-btn delete-btn" data-product-id="${product.id}">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </td>
                `;
                
                productsTableBody.appendChild(row);
            });
            
            // 添加事件监听器
            document.querySelectorAll('.view-btn[data-product-id]').forEach(btn => {
                btn.addEventListener('click', function() {
                    const productId = this.getAttribute('data-product-id');
                    editProduct(productId);
                });
            });
            
            document.querySelectorAll('.delete-btn[data-product-id]').forEach(btn => {
                btn.addEventListener('click', function() {
                    const productId = this.getAttribute('data-product-id');
                    deleteProduct(productId);
                });
            });
        }
        
        // 编辑商品
        function editProduct(productId) {
            const product = products.find(p => p.id === productId);
            if (!product) {
                alert('商品不存在！');
                return;
            }
            
            // 填充表单
            document.getElementById('product-id').value = product.id;
            document.getElementById('product-name').value = product.name;
            document.getElementById('product-price').value = product.price;
            document.getElementById('product-category').value = product.category;
            document.getElementById('product-description').value = product.description || '';
            document.getElementById('product-tag').value = product.tag || '';
            document.getElementById('product-status').value = product.status;
            
            // 滚动到表单
            document.querySelector('.product-form').scrollIntoView({ behavior: 'smooth' });
        }
        
        // 删除商品
        function deleteProduct(productId) {
            if (!confirm(`确定要删除商品 ${productId} 吗？此操作不可撤销！`)) {
                return;
            }
            
            const productIndex = products.findIndex(p => p.id === productId);
            if (productIndex === -1) {
                alert('商品不存在！');
                return;
            }
            
            products.splice(productIndex, 1);
            StorageHelper.setItem('eBankProducts', JSON.stringify(products));
            
            updateAdminStats();
            updateProductsDisplay();
            alert(`商品 ${productId} 已成功删除！`);
        }
        
        // 添加商品
        addProductBtn.addEventListener('click', function() {
            const id = productId.value.trim();
            const name = productName.value.trim();
            const price = parseFloat(productPrice.value);
            const category = productCategory.value;
            const description = productDescription.value.trim();
            const tag = productTag.value.trim();
            const status = productStatus.value;
            
            // 验证输入
            if (!id) {
                alert('请输入商品ID！');
                return;
            }
            
            if (!name) {
                alert('请输入商品名称！');
                return;
            }
            
            if (isNaN(price)) {
                alert('请输入有效的商品价格！');
                return;
            }
            
            // 检查商品ID是否已存在
            if (products.some(p => p.id === id)) {
                alert('商品ID已存在！');
                return;
            }
            
            // 创建新商品
            const newProduct = {
                id,
                name,
                price,
                category,
                description,
                tag,
                status
            };
            
            products.push(newProduct);
            StorageHelper.setItem('eBankProducts', JSON.stringify(products));
            
            updateAdminStats();
            updateProductsDisplay();
            alert(`商品 ${name} 添加成功！`);
            
            // 清空表单
            clearProductForm();
        });
        
        // 更新商品
        updateProductBtn.addEventListener('click', function() {
            const id = productId.value.trim();
            const name = productName.value.trim();
            const price = parseFloat(productPrice.value);
            const category = productCategory.value;
            const description = productDescription.value.trim();
            const tag = productTag.value.trim();
            const status = productStatus.value;
            
            // 验证输入
            if (!id) {
                alert('请输入商品ID！');
                return;
            }
            
            if (!name) {
                alert('请输入商品名称！');
                return;
            }
            
            if (isNaN(price)) {
                alert('请输入有效的商品价格！');
                return;
            }
            
            // 查找商品
            const productIndex = products.findIndex(p => p.id === id);
            if (productIndex === -1) {
                alert('商品不存在！');
                return;
            }
            
            // 更新商品
            products[productIndex] = {
                ...products[productIndex],
                name,
                price,
                category,
                description,
                tag,
                status
            };
            
            StorageHelper.setItem('eBankProducts', JSON.stringify(products));
            
            updateAdminStats();
            updateProductsDisplay();
            alert(`商品 ${name} 更新成功！`);
            
            // 清空表单
            clearProductForm();
        });
        
        // 清空商品表单
        clearProductFormBtn.addEventListener('click', clearProductForm);
        
        function clearProductForm() {
            productId.value = '';
            productName.value = '';
            productPrice.value = '';
            productCategory.value = '会员';
            productDescription.value = '';
            productTag.value = '';
            productStatus.value = 'active';
        }
        
        // Base64编码功能
        // 防止默认拖放行为
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
            document.body.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        // 高亮拖放区域
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            dropArea.classList.add('active');
        }
        
        function unhighlight() {
            dropArea.classList.remove('active');
        }
        
        // 处理文件拖放
        dropArea.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            handleFiles(files);
        }
        
        // 点击选择文件
        dropArea.addEventListener('click', () => {
            fileInput.click();
        });
        
        fileInput.addEventListener('change', function() {
            handleFiles(this.files);
        });
        
        // 处理文件
        function handleFiles(files) {
            if (files.length === 0) return;
            
            const file = files[0];
            
            // 检查文件类型
            if (!file.type.match('image.*')) {
                alert('请选择图片文件！');
                return;
            }
            
            // 显示文件信息
            displayFileInfo(file);
            
            // 读取文件并转换为Base64
            const reader = new FileReader();
            reader.onload = function(e) {
                currentBase64Image = e.target.result;
                base64Textarea.value = currentBase64Image;
                base64Result.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
        
        // 显示文件信息
        function displayFileInfo(file) {
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileType.textContent = file.type;
            
            // 创建图片预览
            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            filePreview.innerHTML = '';
            filePreview.appendChild(img);
            
            fileInfo.style.display = 'block';
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 复制Base64编码
        copyBase64Btn.addEventListener('click', function() {
            base64Textarea.select();
            document.execCommand('copy');
            alert('Base64编码已复制到剪贴板！');
        });
        
        // 应用到充值弹窗
        applyBase64Btn.addEventListener('click', function() {
            if (!currentBase64Image) {
                alert('请先上传图片并生成Base64编码！');
                return;
            }
            
            // 这里可以存储到本地存储或直接应用到代码中
            // 在实际应用中，您可能需要将此数据保存到数据库或配置文件中
            alert('Base64图片已应用到充值成功弹窗！');
            
            // 在实际应用中，您可能需要更新全局变量或配置
            // 例如: window.rechargeSuccessImage = currentBase64Image;
        });
        
        // 清除Base64编码
        clearBase64Btn.addEventListener('click', function() {
            fileInput.value = '';
            fileInfo.style.display = 'none';
            base64Result.style.display = 'none';
            currentBase64Image = '';
            base64Textarea.value = '';
        });
        
        // 显示充值弹窗
        function showRechargeModal() {
            if (!currentUser) {
                alert('请先登录！');
                return;
            }
            
            // 创建弹窗
            const modalOverlay = document.createElement('div');
            modalOverlay.className = 'modal-overlay';
            modalOverlay.id = 'recharge-modal-overlay';
            
            const modalContent = document.createElement('div');
            modalContent.className = 'recharge-modal';
            
            // 弹窗标题
            const title = document.createElement('h2');
            title.textContent = '选择充值金额';
            modalContent.appendChild(title);
            
            // 充值选项
            const optionsContainer = document.createElement('div');
            optionsContainer.className = 'recharge-options';
            
            let selectedOption = null;
            
            rechargeOptions.forEach(option => {
                const optionElement = document.createElement('div');
                optionElement.className = 'recharge-option';
                optionElement.dataset.amount = option.amount;
                
                optionElement.innerHTML = `
                    <div class="recharge-amount">${option.amount} E币</div>
                    <div class="recharge-price">¥ ${option.price.toFixed(2)}</div>
                `;
                
                optionElement.addEventListener('click', function() {
                    // 移除之前选中的选项
                    document.querySelectorAll('.recharge-option').forEach(el => {
                        el.classList.remove('selected');
                    });
                    
                    // 选中当前选项
                    this.classList.add('selected');
                    selectedOption = option;
                });
                
                optionsContainer.appendChild(optionElement);
            });
            
            modalContent.appendChild(optionsContainer);
            
            // 操作按钮
            const actionsContainer = document.createElement('div');
            actionsContainer.className = 'recharge-actions';
            
            const confirmButton = document.createElement('button');
            confirmButton.className = 'recharge-confirm';
            confirmButton.textContent = '确认充值';
            
            const cancelButton = document.createElement('button');
            cancelButton.className = 'recharge-cancel';
            cancelButton.textContent = '取消';
            
            actionsContainer.appendChild(confirmButton);
            actionsContainer.appendChild(cancelButton);
            modalContent.appendChild(actionsContainer);
            
            modalOverlay.appendChild(modalContent);
            document.body.appendChild(modalOverlay);
            
            // 确认充值
            confirmButton.addEventListener('click', function() {
                if (!selectedOption) {
                    alert('请选择充值金额！');
                    return;
                }
                
                // 关闭充值弹窗
                document.body.removeChild(modalOverlay);
                
                // 执行充值
                rechargeUser(selectedOption.amount, selectedOption.price);
            });
            
            // 取消充值
            cancelButton.addEventListener('click', function() {
                document.body.removeChild(modalOverlay);
            });
            
            // 点击遮罩层关闭
            modalOverlay.addEventListener('click', function(e) {
                if (e.target === modalOverlay) {
                    document.body.removeChild(modalOverlay);
                }
            });
        }
        
        // 执行充值
        function rechargeUser(amount, price) {
            if (!currentUser) return;
            
            // 增加用户余额
            currentUser.balance += amount;
            
            // 记录交易
            currentUser.transactions.push({
                date: new Date().toLocaleDateString(),
                type: `现金充值 ${amount} E币`,
                amount: amount,
                balance: currentUser.balance
            });
            
            // 更新本地存储
            const userIndex = userAccounts.findIndex(u => u.id === currentUser.id);
            userAccounts[userIndex] = currentUser;
            StorageHelper.setItem('eBankUsers', JSON.stringify(userAccounts));
            
            // 更新显示
            updateUserDisplay();
            
            // 显示成功弹窗
            showSuccessModal(amount, price);
        }
        
        // 显示成功弹窗
        function showSuccessModal(amount, price) {
            const modalOverlay = document.createElement('div');
            modalOverlay.className = 'modal-overlay';
            modalOverlay.id = 'success-modal-overlay';
            
            const modalContent = document.createElement('div');
            modalContent.className = 'success-modal';
            
            // 创建倒计时元素
            const countdownElement = document.createElement('div');
            countdownElement.className = 'countdown-timer';
            countdownElement.textContent = '20';
            
            // 创建图片元素
            const imageElement = document.createElement('img');
            imageElement.className = 'success-image';
            imageElement.alt = '请扫码支付';
            
            // 使用Base64图片或默认占位图片
            if (currentBase64Image) {
                imageElement.src = currentBase64Image;
            } else {
                // 默认占位图片
                imageElement.src = '';
            }
            
            modalContent.innerHTML = `
                <div class="success-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="success-message">请扫码支付</div>
                <div class="success-details">
                    正在充值 ${amount} E币<br>
                    支付金额 ￥${price.toFixed(2)}<br>
                    当前余额 E${currentUser.balance.toLocaleString()}
                </div>
            `;
            
            // 添加倒计时和图片到弹窗
            modalContent.appendChild(countdownElement);
            modalContent.insertBefore(imageElement, modalContent.firstChild);
            
            modalOverlay.appendChild(modalContent);
            document.body.appendChild(modalOverlay);
            
            // 倒计时功能
            let countdown = 20;
            const countdownInterval = setInterval(() => {
                countdown--;
                countdownElement.textContent = countdown;
                
                if (countdown <= 0) {
                    clearInterval(countdownInterval);
                    if (document.body.contains(modalOverlay)) {
                        document.body.removeChild(modalOverlay);
                    }
                }
            }, 1000);

            // 点击任意位置关闭弹窗
            modalOverlay.addEventListener('click', function() {
                clearInterval(countdownInterval);
                if (document.body.contains(modalOverlay)) {
                    document.body.removeChild(modalOverlay);
                }
            });
        }
        
        // 导航功能
        document.getElementById('to-register').addEventListener('click', () => {
            loginForm.reset();
            showPage(registerPage);
        });
        
        document.getElementById('to-login').addEventListener('click', () => {
            registerForm.reset();
            showPage(loginPage);
        });
        
        document.getElementById('to-admin-login').addEventListener('click', () => {
            loginForm.reset();
            showPage(adminLoginPage);
        });
        
        document.getElementById('to-admin-login-2').addEventListener('click', () => {
            registerForm.reset();
            showPage(adminLoginPage);
        });
        
        document.getElementById('admin-to-login').addEventListener('click', () => {
            adminLoginForm.reset();
            showPage(loginPage);
        });
        
        // 主页面导航
        document.getElementById('trade-btn').addEventListener('click', () => showPage(tradePage));
        document.getElementById('bill-btn').addEventListener('click', () => showPage(billPage));
        document.getElementById('help-btn').addEventListener('click', () => showPage(helpPage));
        document.getElementById('minecraft-btn').addEventListener('click', () => showPage(minecraftPage));
        document.getElementById('version-page-btn').addEventListener('click', () => showPage(versionPage));
        document.getElementById('logout-btn').addEventListener('click', () => {
            currentUser = null;
            isAdmin = false;
            loginForm.reset();
            showPage(loginPage);
        });
        
        // 交易页面导航
        document.getElementById('back-btn').addEventListener('click', () => showPage(mainPage));
        document.getElementById('trade-help-btn').addEventListener('click', () => showPage(helpPage));
        document.getElementById('trade-logout-btn').addEventListener('click', () => {
            currentUser = null;
            isAdmin = false;
            loginForm.reset();
            showPage(loginPage);
        });
        
        // 账单页面导航
        document.getElementById('back-bill-btn').addEventListener('click', () => showPage(mainPage));
        document.getElementById('bill-help-btn').addEventListener('click', () => showPage(helpPage));
        document.getElementById('bill-logout-btn').addEventListener('click', () => {
            currentUser = null;
            isAdmin = false;
            loginForm.reset();
            showPage(loginPage);
        });
        
        // 帮助页面导航
        document.getElementById('back-help-btn').addEventListener('click', () => showPage(mainPage));
        document.getElementById('help-logout-btn').addEventListener('click', () => {
            currentUser = null;
            isAdmin = false;
            loginForm.reset();
            showPage(loginPage);
        });
        
        // Minecraft页面导航
        document.getElementById('back-minecraft-btn').addEventListener('click', () => showPage(mainPage));
        document.getElementById('minecraft-help-btn').addEventListener('click', () => showPage(helpPage));
        document.getElementById('minecraft-logout-btn').addEventListener('click', () => {
            currentUser = null;
            isAdmin = false;
            loginForm.reset();
            showPage(loginPage);
        });
        
        // 版本页面导航
        document.getElementById('back-version-btn').addEventListener('click', () => showPage(mainPage));
        document.getElementById('version-help-btn').addEventListener('click', () => showPage(helpPage));
        document.getElementById('version-logout-btn').addEventListener('click', () => {
            currentUser = null;
            isAdmin = false;
            loginForm.reset();
            showPage(loginPage);
        });
        
        // 管理员页面导航
        document.getElementById('admin-back-btn').addEventListener('click', () => {
            isAdmin = false;
            showPage(adminLoginPage);
        });
        document.getElementById('admin-help-btn').addEventListener('click', () => showPage(helpPage));
        document.getElementById('admin-logout-btn').addEventListener('click', () => {
            currentUser = null;
            isAdmin = false;
            adminLoginForm.reset();
            showPage(adminLoginPage);
        });
        
        // 版本信息按钮功能
        document.getElementById('version-btn').addEventListener('click', () => {
            showPage(versionPage);
        });
        
        // 充值按钮功能
        document.getElementById('recharge-btn').addEventListener('click', showRechargeModal);
        
        // 初始化显示登录页
        showPage(loginPage);
        
        // 监听URL哈希变化
        window.addEventListener('hashchange', handleHashChange);
        
        // 页面加载时检查URL哈希
        window.addEventListener('load', function() {
            // 初始化数据存储
            if (!StorageHelper.getItem('eBankUsers')) {
                StorageHelper.setItem('eBankUsers', JSON.stringify([]));
            }
            
            if (!StorageHelper.getItem('eBankProducts')) {
                StorageHelper.setItem('eBankProducts', JSON.stringify(products));
            }
            
            // 处理初始URL哈希
            handleHashChange();
        });
    </script>
</body>
</html>